<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>
	
	<h1>1-下拉菜单(一)</h1>
	<div class="dropdown">
		<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
	      	主题
	    	<span class="caret"></span>
	    </button>
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
			<li role="presentation">	
				<a role="menuitem" tabindex="-1" href="#">Java</a>
			</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
			</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">
					数据通信/网络
				</a>
			</li>
			<li role="presentation" class="divider"></li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
			</li>
		</ul>
	</div>

	<h1>2-选项(二)</h1>
	<pre>在 &lt;ul class="dropdown-menu 后面加上 pull-right</pre>
	<div class="dropdown">
		<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
			主题
	    	<span class="caret"></span>
	    </button>
		<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">Java</a>
			</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
			</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">
					数据通信/网络
				</a>
			</li>
			<li role="presentation" class="divider"></li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
			</li>
		</ul>
	</div>


	<h1>3-添加标题</h1>
	<p>您可以使用 <strong>class dropdown-header</strong> 向下拉菜单的标签区域添加标题。</p>

	<div class="dropdown">
		<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
	      主题
	      <span class="caret"></span>
	   </button>
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
			<li role="presentation" class="dropdown-header">下拉菜单标题</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">Java</a>
			</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
			</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">
					数据通信/网络
				</a>
			</li>
			<li role="presentation" class="divider"></li>
			<li role="presentation" class="dropdown-header">下拉菜单标题</li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
			</li>
		</ul>
	</div>

	<h1>4-按钮下拉菜单</h1>
	<div class="btn-group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	      默认 <span class="caret"></span>
	   </button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">功能</a>
			</li>
			<li>
				<a href="#">另一个功能</a>
			</li>
			<li>
				<a href="#">其他</a>
			</li>
			<li class="divider"></li>
			<li>
				<a href="#">分离的链接</a>
			</li>
		</ul>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
	      原始 <span class="caret"></span>
	   </button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">功能</a>
			</li>
			<li>
				<a href="#">另一个功能</a>
			</li>
			<li>
				<a href="#">其他</a>
			</li>
			<li class="divider"></li>
			<li>
				<a href="#">分离的链接</a>
			</li>
		</ul>
	</div>
	
	<h1>5-分割的按钮下拉菜单</h1>
	<div class="btn-group">
		<button type="button" class="btn btn-default">默认</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	      <span class="caret"></span>
	      <span class="sr-only">切换下拉菜单</span>
	   </button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">功能</a>
			</li>
			<li>
				<a href="#">另一个功能</a>
			</li>
			<li>
				<a href="#">其他</a>
			</li>
			<li class="divider"></li>
			<li>
				<a href="#">分离的链接</a>
			</li>
		</ul>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-primary">原始</button>
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
	      <span class="caret"></span>
	      <span class="sr-only">切换下拉菜单</span>
	   </button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">功能</a>
			</li>
			<li>
				<a href="#">另一个功能</a>
			</li>
			<li>
				<a href="#">其他</a>
			</li>
			<li class="divider"></li>
			<li>
				<a href="#">分离的链接</a>
			</li>
		</ul>
	</div>

	<h1>6-按钮下拉菜单的大小</h1>
	<pre>bt-sm,bt-lg,bt-xs</pre>
	<div class="btn-group">
		<button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
	      默认 <span class="caret"></span>
	   </button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">功能</a>
			</li>
			<li>
				<a href="#">另一个功能</a>
			</li>
			<li>
				<a href="#">其他</a>
			</li>
			<li class="divider"></li>
			<li>
				<a href="#">分离的链接</a>
			</li>
		</ul>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
	      原始 <span class="caret"></span>
	   </button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">功能</a>
			</li>
			<li>
				<a href="#">另一个功能</a>
			</li>
			<li>
				<a href="#">其他</a>
			</li>
			<li class="divider"></li>
			<li>
				<a href="#">分离的链接</a>
			</li>
		</ul>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">
	      成功 <span class="caret"></span>
	   </button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">功能</a>
			</li>
			<li>
				<a href="#">另一个功能</a>
			</li>
			<li>
				<a href="#">其他</a>
			</li>
			<li class="divider"></li>
			<li>
				<a href="#">分离的链接</a>
			</li>
		</ul>
	</div>

	<h1>7-按钮上拉菜单</h1>
	<p>菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可</p>
	<div class="row" style="margin-left:50px; margin-top:200px">
		<div class="btn-group dropup">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	         默认 <span class="caret"></span>
	      </button>
			<ul class="dropdown-menu" role="menu">
				<li>
					<a href="#">功能</a>
				</li>
				<li>
					<a href="#">另一个功能</a>
				</li>
				<li>
					<a href="#">其他</a>
				</li>
				<li class="divider"></li>
				<li>
					<a href="#">分离的链接</a>
				</li>
			</ul>
		</div>
		<div class="btn-group dropup">
			<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
	         原始 <span class="caret"></span>
	      </button>
			<ul class="dropdown-menu" role="menu">
				<li>
					<a href="#">功能</a>
				</li>
				<li>
					<a href="#">另一个功能</a>
				</li>
				<li>
					<a href="#">其他</a>
				</li>
				<li class="divider"></li>
				<li>
					<a href="#">分离的链接</a>
				</li>
			</ul>
		</div>
	</div>

	

	</body>
</html>
